<template>
  <div id="SignContract" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">
    <div class="top">
      <img style="width:80%;margin: 0 auto" src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/YPC/12.png" />
      <p>
        <span style="width:31%;display: inline-block;text-align: center;">项目基本信息</span>
        <span style="width:41%;display: inline-block;text-align: center;">签订合同</span>
        <span style="width:25%;display: inline-block;text-align: center;">竣工验收</span>
      </p>
    </div>
    <div class="content">
      <div class="tab">
        <ul>
          <li v-for="(item,index) in tabData" :key="index" :class="{ select: nowIndex === index }" @click="tabClick(index)">{{item}}</li>
        </ul>
      </div>
      <div v-if="nowIndex===0" class="list">
        <div id="pdfDom" class="ht">
          <p>&nbsp;&nbsp;根据《中华人民共和国合同法》《惠州市农村住房建设管理办法》以及其他有关法律规定，遵循平等、自愿、公平和诚实信用的原则，双方就低层农村住房建设（以下简称建房）施工有关事项协商一致，共同达成如下协议： </p>
          <p>&nbsp;&nbsp;一、建房概况 </p>
          <p>1.附件预算清单是合同的组成部分。合同未尽事宜，双方可以另行签订补充协议，补充协议是合同的组成部分。</p>
          <p>2.本合同自双方签字或者盖章之日起生效。</p>
          <p>3.本合同一式 份，具有同等法律效力，发包人执 份，承包人执 份。</p>
          <p>附件：预算清单</p>

          <p>发包人（签字或者盖章）：</p>
          <img v-if="resultImg" :src="resultImg" alt="" />
          <p>承包人（签字或者盖章）：</p>
          <img v-if="resultImg1" :src="resultImg1" alt="" />
          <p>
            <van-field :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" v-model="ZJG" label="签订日期：" />
          </p>
          <p>惠州市住房和城乡建设厅办公室 2018年11月2日印发</p>
        </div>
        <div class="bottom">
          <vue-esign ref="esign" :height="200" class="mySign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
          <div class="dialog-footer">
            <el-button :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" size="mini" @click="handleGenerate" type="primary">生成签字图片</el-button>
            <el-button :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" size="mini" @click="handleReset" type="primary">清空画板</el-button>
            <!--<el-button size="mini" @click="handleCreateHtmlPdf" type="primary">下一步</el-button>-->
          </div>
        </div>
        <van-button :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" @click="saveData" type="info" block>下一步</van-button>
      </div>
      <div v-if="nowIndex===1" class="list">
        <div id="pdfDom" class="ht">
          <p>&nbsp;&nbsp;为了进一步加强农村建房安全监督管理，确保农房建筑施工安全，使安
            全生产责任到人，措施到位，特签订施工安全责任书。
            一、按照“分级负责、属地为主”原则，甲方负责本行政村农村建房施
            工安全监督管理工作，强化村民建房安全宣传，提高村民建房户安全防范意
            识，切实消除建房安全事故的发生。乙方和丙方必须服从甲方的监督和管
            理。</p>
          <p>&nbsp;&nbsp;二、乙方和丙方必须严格按建房审批内容和有资质的设计单位提供的施
            工图施工，不得擅自更改，并采用合格建筑材料，不得偷工减料。丙方必须
            持有《建筑工匠职业资格证书》。</p>
          <p>&nbsp;&nbsp;三、乙方和丙方不得以雇工和帮工的形式，让未成年人和年老体弱者或
            带病者参与房屋拆除和建造等工作。乙方督促丙方施工人员必做好安全防护
            如安全帽、安全带等，不得酒后高空作业。</p>
          <p>&nbsp;&nbsp;四、施工用脚手架和升降机必须按建筑规范要求设计和操作，涉及人员
            通行地段必须安全安全防护网。</p>
          <p>&nbsp;&nbsp;五、施工用电须请供电部门专业电工安装接线并做到安全操作，提倡用
            电三级保护。</p>
          <p>&nbsp;&nbsp;六、不准在村庄道路上堆放建筑材料及安放施工机械等，施工现场要设
            置围栏、屏障等，防止非施工人员进入现场造成人员伤害。</p>

          <p>&nbsp;&nbsp;七、按“谁用工、谁负责”的原则，乙方、丙方是工程质量安全的第一
            责任人。乙方、丙方必须为雇佣施工人员购买人身意外伤害保险，保障其人
            身安全。</p>
          <p>&nbsp;&nbsp;八、甲方对乙方和丙方在建房过程中违规和违章行为，有权予以制止，
            并上报镇城建办视情节做出相应处理，对乙方和丙方不听制止造成严重后果
            的，将追究法律责任。</p>
          <p>&nbsp;&nbsp;九、本责任书一式四份，甲、乙、丙三方各执一份，镇城建办存档一
            份。</p>
          <p></p>

          <p>甲方: 孝村村村委会</p>

          <p>乙方:</p>
          <img v-if="resultImg" :src="resultImg" alt="" />
          <p>丙方:</p>
          <img v-if="resultImg1" :src="resultImg1" alt="" />
          <p>
            <van-field :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" v-model="ZJG" label="签订日期：" />
          </p>
          <!--<p>惠州市住房和城乡建设厅办公室 2018年11月2日印发</p>-->
        </div>
        <div class="bottom">
          <vue-esign ref="esign" :height="200" class="mySign" :isCrop="isCrop" :lineWidth="lineWidth" :lineColor="lineColor" :bgColor.sync="bgColor" />
          <div class="dialog-footer">
            <el-button :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" size="mini" @click="handleGenerate" type="primary">生成签字图片</el-button>
            <el-button :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" size="mini" @click="handleReset" type="primary">清空画板</el-button>
            <!--<el-button size="mini" @click="handleCreateHtmlPdf" type="primary">下一步</el-button>-->
          </div>
        </div>
        <van-button :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}" @click="saveData" type="info" block>下一步</van-button>
      </div>
    </div>
  </div>
</template>



<script>
import { getPreview } from '../../utils/api'
export default {
  data () {
    return {
      GJQZ: '',
      isGJ: '',
      showEdition: false,
      resultImg: '',
      resultImg1: '',
      ZJGS: '',
      startTime: '',
      endTime: '',
      radio: '',
      nowIndex: 0,
      tabData: ["施工合同", "安全责任书"],
      value: '',
      showPicker: false,
      showPicker1: false,
      ZJG: '',
      htData: {
        fbr: ''
      }
    }
  },
  methods: {
    tabClick (index) {
      this.nowIndex = index
      switch (this.nowIndex) {
        case 0:
          if (ZWJSBridge) {
            ZWJSBridge.setTitle({
              "title": "签订合同"
            }).then(res => {
            }).catch(err => {
            })
          }
          break
        case 1:
          if (ZWJSBridge) {
            ZWJSBridge.setTitle({
              "title": "安全责任书"
            }).then(res => {
            }).catch(err => {
            })
          }
          break
      }
    },
    onConfirm (value) {
      var d = new Date(value);
      d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      this.startTime = d;
      this.showPicker = false;
    },
    onConfirm1 (value) {
      var d = new Date(value);
      d = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate()
      this.endTime = d;
      this.showPicker1 = false;
    },
    // 清空画板
    handleReset () {
      this.$refs.esign.reset();
    },
    // 生成签字图
    handleGenerate () {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res;
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
          this.$message({
            type: "warning",
            message: "请签名后再生成签字图片",
          });
        });
      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      setTimeout(() => {
        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
      }, 200);
    },
    handleGenerate1 () {
      this.$refs.esign1
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg1 = res;
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
          this.$message({
            type: "warning",
            message: "请签名后再生成签字图片",
          });
        });
      // 在这里向后端发请求把转换后的base64文件传给后端，后端接收以后再转换成图片做静态图片存储
      // 当然也可以把base64转成流文件blob格式的，类似上传给后端这样，具体哪种方式看后端要求
      setTimeout(() => {
        // 这里要使用定时器稍微延后以后就能取到base64数据了，当然也可以再加一个确认按钮，如：确认使用这张base64签名图片
        // 点击确认以后，在其回调函数中，再把base64的签名图片传给后端用于存储
      }, 200);
    },
    //先使用插件生成图片
    handleCreateHtmlPdf () {
      //   setTimeout(() => {
      //     this.$router.push({
      //       path: "/ChooseCraftsman",
      //     });
      //   }, 2000)
      //   this.getPdf('pdfDom', '承诺书')
      //   this.$router.push({
      //     path: "/TreeSelect",
      //     query: {
      //       data: { TASK_ID: this.tableData.TASK_ID },
      //     }
      //   });
    },
    saveData () {
      this.getPdf('pdfDom', '合同.png')
      setTimeout(() => {
        this.$router.push({
          path: '/ZLJIndex',
        });
      }, 1000)
    },
    getPreview: async function (data) {
      const res = await getPreview(data);
      if (res.data.code == 200) {
        this.GJQZ = ""
      } else {

      }
    },
  },
  mounted () {
    // if(window.localStorage.getItem('role') =='{"8":"工匠"}'){
    //   this.isGJ = true
    // }else{
    //    this.isGJ = false
    //  this.$route.query.data.HTGUID
    this.getPreview('9a40e85e-b9df-438e-9641-68a4ff403a2b')
    // }
    this.tableData = this.$route.query.data
    //    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        "title": "签订合同"
      }).then(res => {
      }).catch(err => {
      })
    }
  }
}
</script>
<style lang="scss">
#SignContract {
  height: 100vh;
  overflow: auto;
  background: #f6f6f6;
  .title {
    width: 100%;
    height: 50px;
    background: #007aff;
    line-height: 50px;
    text-align: center;
    color: #ffffff;
    font-size: 20px;
    position: relative;
  }
  .top {
    height: 90px;
    background: #ffffff;
    margin-bottom: 20px;
    padding-top: 25px;
    text-align: center;
    .origin {
      width: 22px;
      height: 22px;
      background: #007aff;
      border-radius: 50%;
      display: inline-block;
    }
    .line {
      width: 20vw;
      /*height: 1px;*/
      border: 1px dashed #007aff;
      display: inline-block;
    }
  }
  .content {
    width: 100%;
    height: auto;
    background: #ffffff;
    padding: 10px;
    .line {
      width: 6px;
      height: 26px;
      background: #007aff;
      display: inline-block;
    }
    .list ul li {
      min-height: 50px;
      line-height: 50px;
    }
    .tab {
      height: 40px;
      border-bottom: 1px solid #9b9b9b;
      ul li {
        width: 50%;
        height: 40px;
        line-height: 35px;
        float: left;
        text-align: center;
      }
      .select {
        color: #3f8ffc;
        border-bottom: 5px solid #3f8ffc;
      }
    }
  }
  .bottom {
    width: 100%;
    height: 230px;
    background: #ffffff;
    margin-bottom: 20px;
    .dialog-footer {
      margin-top: 5px;
      margin-left: 15%;
    }
  }
}
</style>
<style lang="scss">
.ht {
  padding-top: 10px;
  .van-cell {
    padding: 0px 0px !important;
    font-size: 16px;
  }
  .van-field__label {
    width: auto !important;
  }
}
</style>
